<script>
import {getallclass} from "@/api/apiz";
import Vue from 'vue'
import {ACCESS_TOKEN} from "@/store/mutation-types"
import {addHomework, editHomework, getQuestionnaire} from "../../api/apiz";
export default {
  name: "editwork",
  data() {
    return {
      title: "作业",
      visibleForm: false,
      httpsUrl: window._CONFIG['domianURL'],
      uploadAction: window._CONFIG['domianURL'] + "/sys/upload/file?fileType=image",
      classAll: [],
      formmodel: {},
      rules: {
        taskTitle: [{ required: true, message: "请输入作业题目", trigger: "blur" }],
        taskDescription: [{ required: true, message: "请输入作业描述", trigger: "blur" }],
        classId: [{ required: true, message: "请选择所属班级", trigger: "blur" }],
        taskType: [{ required: true, message: "请选择作业类型", trigger: "blur" }],
        questionnaireId: [{ required: true, message: "请选择问卷", trigger: "blur" }]
      },
      uploadHeaders:'',
      fiieList: [],
      questionnaireAll: [],
      classId: ''
    };
  },
  created() {
    const token = Vue.ls.get(ACCESS_TOKEN);
    this.uploadHeaders = {"X-Access-Token": token}
  },
  mounted() {
    this.gettype();
  },
  methods:{
    gettype(){
      getallclass().then(res=>{
        if (res.code == 200) {
          this.classAll = res.result
        }else {
          this.$message.warning(res.message)
        }
      })
      let parems = {
        pageNo: 1,
        pageSize: 10000
      }
      getQuestionnaire(parems).then(res=>{
        if (res.code == 200) {
          this.questionnaireAll = res.result.records
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    getWorkData(data,type,classId) {
      this.classId = classId;
      if (type == 'add') {
        this.title = '新增作业';
        this.formmodel = {
          taskTitle: '',
          taskDescription: '',
          classId: this.classId,
          taskType: '',
          questionnaireId: '',
          fileUrl: ''
        }
        this.fiieList = [];
      } else {
        this.title = '编辑作业';
        this.formmodel = {
          id: data.id,
          taskTitle: data.taskTitle,
          taskDescription: data.taskDescription,
          classId: data.classId,
          taskType: data.taskType,
          questionnaireId: data.questionnaireId,
          fileUrl: data.fileUrl
        }
        this.fiieList.push({
          fileName: data.fileName,
          url: data.fileUrl
        })
      }
      this.visibleForm = true;
    },
    handleAvatarSuccess(res, file) {
      if (res.code == 200) {
        this.fiieList.push(res.result)
      } else {
        this.$message.error(res.message);
      }
    },
    handleAvatarError(err, file) {
      console.log(err)
      this.$message.error('上传失败');
    },
    //下载
    handleUpload(url){
      window.open(this.httpsUrl + '/' + url)
    },
    handleOk(){
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.formmodel.id){
            editHomework(this.formmodel).then(res=>{
              if (res.code == 200) {
                this.$message.success('编辑成功');
                this.visibleForm = false;
                this.fiieList = [];
                this.$emit('refreshData');
              }else {
                this.$message.warning(res.message)
              }
            })
            return
          }else {
            this.formmodel.fileUrl = this.fiieList.length > 0 ? '/' + this.fiieList[0].url : '';
            this.formmodel.fileName = this.fiieList.length > 0 ? this.fiieList[0].fileName : '';
            addHomework(this.formmodel).then(res=>{
              if (res.code == 200) {
                this.$message.success('新增成功');
                this.visibleForm = false;
                this.fiieList = [];
                this.$emit('refreshData');
              }else {
                this.$message.warning(res.message)
              }
            })
            return;
          }

        }
      });
    },
    handleCance(){
      this.visibleForm = false;
    }
  }
}
</script>

<template>
<div>
  <a-modal :title="title" :width="500" :visible="visibleForm" @ok="handleOk" @cancel="handleCance" cancelText="关闭" style="top:5%;height: 85%;overflow-y: hidden">
    <el-form :model="formmodel" :rules="rules" ref="form" >
      <el-form-item label="作业题目" prop="taskTitle">
        <el-input v-model="formmodel.taskTitle" placeholder="请输入作业题目" clearable class="elinput"></el-input>
      </el-form-item>
      <el-form-item label="作业描述" prop="taskDescription">
        <el-input type="textarea" v-model="formmodel.taskDescription" placeholder="请输入作业描述" clearable class="elinput"></el-input>
      </el-form-item>
      <!--<el-form-item label="所属班级" prop="classId">-->
      <!--  <el-select v-model="formmodel.classId" placeholder="请选择所属班级" clearable class="elinput">-->
      <!--    <el-option v-for="(item,index) in classAll" :key="index" :label="item.name" :value="item.id"></el-option>-->
      <!--  </el-select>-->
      <!--</el-form-item>-->
      <el-form-item label="作业类型" prop="taskType">
        <el-select v-model="formmodel.taskType" placeholder="请选择作业类型" clearable class="elinput">
          <el-option label="上传类型" :value="1"></el-option>
          <el-option label="问卷类型" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="问卷选择" prop="questionnaireId" v-if="formmodel.taskType == 2">
        <el-select v-model="formmodel.questionnaireId" placeholder="请选择问卷" clearable class="elinput">
          <el-option v-for="(item,index) in questionnaireAll" :key="index" :label="item.questionnaireName" :value="item.questionnaireMainId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="fileUrl" v-if="formmodel.taskType == 1">
        <div>
          <div slot="label">作业附件</div>
          <el-upload drag :action="uploadAction" :headers="uploadHeaders" :show-file-list="false" :on-success="handleAvatarSuccess" :on-error="handleAvatarError" class="elupload" v-if="fiieList.length == 0">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
          <div v-else>
            <div v-for="(item,index) in fiieList" :key="index" class="elupload_list">
              <el-link @click="handleUpload(item.url)">{{item.fileName}}</el-link>
              <el-button type="text" @click="fiieList.splice(index,1)">删除</el-button>
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </a-modal>
</div>
</template>

<style scoped lang="less">
.elinput {
  width: 100%;
}
.elupload{
  width: 100%;
}
::v-deep .el-upload{
  width:100% !important;
  height: 100px !important;
}
::v-deep .el-upload-dragger{
  width:100% !important;
  height: 100px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.el-icon-upload{
  font-size: 30px;
  line-height: normal;
  margin: 0;
}
.elupload_view{
  display: flex;
  align-items: center;
  flex-direction: column;
}
.el-upload__text{
  color: #999;
  font-size: 12px;
}
.elupload_list{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #eeeeee;
  padding: 6px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
}
</style>
